<template>
    <div class="tmpl">
        <nav-bar title="图文分享"></nav-bar>
        <!-- 引入返回导航 -->
        <div class="photo-header">
            <ul>
                <li v-for="category in categoryList" :key="category.id">
                    <a href="javascript:;" @click="loadPhoto(category.category)">{{category.category}}</a>
                </li>
            </ul>
        </div>
        <div class="photo-list">
            <ul>
                <li v-for="photo in allPhoto" :key="photo.id">
                    <router-link :to="{name:'photo.detail',params:{id:photo.id}}">
                        <!--懒加载-->
                        <!--<img :src="photo.url">-->
                        <img v-lazy="photo.url">
                        <p>
                            <span v-text="photo.title"></span>
                            <br>
                            <span v-text="photo.tabloid"></span>
                        </p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "photoShare",
        data(){
            return {
                categoryList:[],//图片分类
                allPhoto:[],

            }
        },
        created(){
            //发起请求获取导航栏数据
            this.$ajax.get('photoCategory/getPhotoCategory')
                .then(res=>{
                    this.categoryList = res.data.message;

                    //将全局添加到数组的第一位 unshift
                    this.categoryList.unshift({
                        id:0,
                        category:'全部'
                    })
                })
                .catch(err=>{
                    console.log(err);
                })

            this.loadPhoto(0);

        },
        methods:{
            loadPhoto(category){
                // 将0作为参数,获取全部图片数据
                if(category==='全部'){
                    this.loadPhoto(0);
                    return ;
                }
                this.$ajax.get('photos/findPhotos/'+category)
                    .then(res=>{
                        this.allPhoto = res.data.message;
                    })
                    .catch(err=>{
                        console.log(err);
                    })
            }
        }
    }
</script>

<style scoped>
    .photo-header li {
        list-style: none;
        display: inline-block;
        margin-left: 10px;
        height: 30px;
    }

    .photo-header ul {
        /*强制不换行*/
        white-space: nowrap;
        overflow-x: auto;
        padding-left: 0px;
        margin: 5px;
    }


    /*下面的图片*/

    .photo-list li {
        list-style: none;
        position: relative;
    }

    .photo-list li img {
        width: 100%;
        height: 180px;
        vertical-align: top;
    }

    .photo-list ul {
        padding-left: 0px;
        margin: 0;
    }

    .photo-list p {
        position: absolute;
        bottom: 0px;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        margin-bottom: 0px;
    }

    .photo-list p span:nth-child(1) {
        font-weight: bold;
        font-size: 16px;
    }
    /*图片懒加载的样式*/
    image[lazy=loading]{
        width: 40px;
        height: 300px;
        margin: auto;
    }

</style>